<template>
	<form style="height: 100vh;background-color: white;" class="bg-white">
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
					:data-url="imgList[index]">
					<image :src="imgList[index]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
		</view>
		<view class="cu-form-group ">
			<textarea maxlength="-1" :disabled="modalName!==null" @input="textareaAInput" placeholder="请输入详情"
				v-model="detail"></textarea>
		</view>
		<view class="cu-form-group">
			<view class="title">标题</view>
			<input placeholder="请输入标题" name="input" v-model="title" />
		</view>
		<view class="cu-form-group">
			<view class="title">地点</view>
			<input placeholder="请输入地点" name="input" v-model="place" />
		</view>
		<view class="cu-form-group">
			<view class="title">请选择活动类型</view>
			<picker @change="PickerChange1" :value="index1" :range="picker1">
				<view class="picker">
					{{index1>-1?picker1[index1]:'请选择活动类型'}}
				</view>
			</picker>
		</view>
		<view v-if="index1<=3&&index1>=0">
			<view class="rank">
				<text style="margin-right: 2vw;">技术:</text><van-rate :count="5" v-model="value4"  void-icon="star" void-color="#bdbdbd" @change="onChange4" />
			</view>
			<view class="rank">
				<text style="margin-right: 2vw;">速度:</text><van-rate :count="5" v-model="value5"  void-icon="star" void-color="#bdbdbd" @change="onChange5" />
			</view>
			<view class="rank">
				<text style="margin-right: 2vw;">体力:</text><van-rate :count="5" v-model="value6"  void-icon="star" void-color="#bdbdbd" @change="onChange6" />
			</view>
		</view>
		<view class="cu-form-group">
			<view class="title">开始时间</view>
			<picker mode="time" :value="time1" start="00:00" end="23:59" @change="TimeChange1">
				<view class="picker">
					{{time1}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">结束时间选择</view>
			<picker mode="time" :value="time2" start="00:00" end="23:59" @change="TimeChange2">
				<view class="picker">
					{{time2}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">开始日期</view>
			<picker mode="date" :value="date1" start="2015-01-01" end="2030-12-31" @change="DateChange1">
				<view class="picker">
					{{date1}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">结束日期</view>
			<picker mode="date" :value="date2" start="2015-01-01" end="2030-12-31" @change="DateChange2">
				<view class="picker">
					{{date2}}
				</view>
			</picker>
		</view>
		
		
		<view class="btn">
			<button class="cu-btn round lg bg-blue" @tap="sub" data-target="DialogModal1">发布</button>
		</view>

		<!-- 匹配的模态窗口 -->
		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">匹配结果</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>

				<view v-if="hasMatch">
					<!-- 用户头像 -->
					<view class="padding-xl">
						<view class="cu-avatar xl round margin-left"
							:style="{ 'background-image': 'url(' + matchAvatar + ')' }">
						</view>
					</view>
					<!-- 用户昵称 -->
					<view class="cu-capsule round">
						<view class='cu-tag bg-red '>
							<text class='cuIcon-likefill'></text>
						</view>
						<view class="cu-tag line-red">
							{{ matchName }}
						</view>
					</view>
					<view class="cu-card article">
						<view class="cu-item shadow">
							<view>
								<view class="cu-tag bg-red light sm round">{{ postTag }}</view>
							</view>
							<view class="title">
								<view class="text-cut">
									{{ postTitle }}
								</view>
							</view>
							<view class="content">
								<view class="desc">
									<view class="text-content">
										{{ postContent }}
									</view>
								</view>
							</view>

						</view>
					</view>
					<view class="cu-bar bg-white justify-end">
						<view class="action">
							<button class="cu-btn line-green text-green" @tap="hideModal">继续发布</button>
							<button class="cu-btn bg-blue margin-left" @tap="showDetail">查看帖子</button>
							<button class="cu-btn bg-green margin-left" @tap="redrictCommunication">沟通</button>
						</view>
					</view>
				</view>

				<view v-if="!hasMatch">
					<view class="padding-xl">
						暂无合适的人选
					</view>
					<view class="cu-bar bg-white justify-end">
						<view class="action">
							<button class="cu-btn line-green text-green" @tap="hideModal">确定</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</form>
</template>

<script>
	import {
		truncateString
	} from '@/store/constants.js'
	import {
		uploadimg,
		pushpost,
		showAllpost,getTags
	} from '@/store/api.js'
	export default {
		mounted() {
			getTags().then(res=>{
				console.log(res)
				this.taglist=res.data.data
				res.data.data.forEach(item=>{
					this.picker1.push(item.name)
				})
			}).catch(err=>{
				console.log(err)
			})
		},
		data() {
			return {
				MatchId:'',
				value4:0,
				value5:0,
				value6:0,
				hasMatch: true,
				matchName: '',
				posterId: 0,
				postTag: '',
				postTitle: '',
				postContent: '',
				matchAvatar: '',
				taglist: [
				],
				iddd:'',
				place: '',
				detail: '',
				title: '',
				index: -1,
				imgList: [],
				modalName: null,
				index1: -1,
				index2: -1,
				picker1: [],
				time1: '00:00',
				time2: '00:00',
				date1: new Date().toISOString().slice(0, 10),
				date2: new Date().toISOString().slice(0, 10),
				content: '',
				data3: ''
			};
		},
		onUnload() {
			uni.reLaunch({
				url: '/pages/Public/Public'
			})
		},
		methods: {
			showDetail(){
				console.log(this.iddd)
				uni.navigateTo({
					url: `/subpkg/mes_detail/mes_detail?id=${this.iddd}`
				})
			},
			onChange4(e){
				// console.log(123213213)
				// this.value4=4
				console.log(e)
			},
			onChange5(e){
				// this.value5=3
				console.log(e)
			},
			onChange6(e){
				// this.value6=1
				console.log(e)
			},
			hideModal(e) {
				uni.showLoading({
					title: '发布中...'
				});
				this.modalName = null
				pushpost(this.data3).then(res => {
					console.log(res)
					uni.hideLoading()
					uni.showToast({
						title: '发布成功！',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 1000
					})
					//清空表单
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/Public/Public' // 要重新加载的页面路径
						});
					}, 1000)

				}).catch(err => {
					uni.showToast({
						title: '发布失败！',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'error',
						//显示持续时间为 2秒
						duration: 1000
					})
				})

			},
			redrictCommunication(e) {
				this.modalName = null
				// uni.reLaunch({
				// 	url: '/pages/Public/Public' // 要重新加载的页面路径
				// });
				uni.navigateTo({
					url: `/subpkg/chat_detail/chat_detail?name=${this.matchName}&src=${this.matchAvatar}&userid=${this.posterId}`
				})
			},
			PickerChange1(e) {
				this.index1 = e.detail.value;
			},
			PickerChange2(e) {
				this.index2 = e.detail.value;
			},
			TimeChange1(e) {
				this.time1 = e.detail.value;
			},
			TimeChange2(e) {
				this.time2 = e.detail.value;
			},
			DateChange1(e) {
				this.date1 = e.detail.value;
			},
			DateChange2(e) {
				this.date2 = e.detail.value;
			},
			textareaAInput(e) {
				this.textareaAValue = e.detail.value;
			},
			textareaBInput(e) {
				this.textareaBValue = e.detail.value;
			},
			ChooseImage() {
				console.log('看这里')
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						console.log(res.tempFilePaths)
						res.tempFilePaths.forEach(item => {
							console.log(item)
							uploadimg(item).then(res => {
								console.log(res)
								this.imgList.push(JSON.parse(res).data)
							})
						})
					}
				});
			},
			ViewImage(e) {
				console.log(e)
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					cancelText: '再看看',
					confirmText: '再见',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			sub(e) {
				if(this.index1==-1||this.title==''){
					uni.showToast({
						title:'请输入完整信息！',
						icon:'error',
						duration:1000
					})
					return
				}
				let ranks={
					value4:this.value4,
					value5:this.value5,
					value6:this.value6
				}
				let id = this.index1
				if (this.imgList.length === 0&&this.index1>3) {
					this.content = this.detail
				} else if(this.imgList.length != 0&&this.index1>3){
					this.content = this.detail + '**/img/**' + this.imgList
				}else{
					this.content = this.detail+'**/rank/**'+JSON.stringify(ranks) + '**/img/**' + this.imgList
				}
				const tags = [Object.fromEntries(Object.entries(this.taglist[id]))];
				let data = {
					title: this.title,
					meetAddress: this.place,
					beginTime: this.date1 + 'T' + this.time1 + ':00.000+00:00',
					endTime: this.date2 + 'T' + this.time2 + ':00.000+00:00',
					latitude: '',
					longtitude: '',
					tags: tags,
					content: this.content
				}
				console.log(data)
				this.data3 = data
				let dataaa = {
					pageSize: 1,
					pageNum: 1,
					q: this.detail,
				}
				showAllpost(dataaa).then((res) => {
					console.log(res)
					this.modalName = e.currentTarget.dataset.target
					if (res.data.data.total === 0) {
						this.hasMatch = false;
					} else {
						console.log(res.data.data.rows[0])
						this.matchName = res.data.data.rows[0].posterUsername
						this.matchAvatar = res.data.data.rows[0].posterAvatar
						this.postTag = res.data.data.rows[0].posterId
						this.postTitle = res.data.data.rows[0].title
						this.postContent = truncateString(res.data.data.rows[0].content)
						this.posterId = res.data.data.rows[0].posterId
						this.iddd= res.data.data.rows[0].id
						
					}
				})
			}
		},
	};
</script>


<style lang="scss" scoped>
	.rank{
		display: flex;
		align-items: center;
		padding-left: 4vw;
		font-size: 2ex;
		background-color: aliceblue;
	}
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

	.btn {
		width: 100%;
		text-align: center;
		margin-top: 10rpx;
	}

	.cu-btn {
		width: 70%;
	}
</style>